﻿* {
    margin: 0;
    padding: 0
}

html {
    font-size: 20px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html, body {
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none
}
li{list-style:none;}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}


svg:not(:root) {
    overflow: hidden
}

a {
    text-decoration: none
}

a, img, button, input[type='button'], input[type='submit'], input[type='reset'] {
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}

body, button, input, textarea, select, option, pre, optgroup {
    line-height: 1.5;
    font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Arial;
    color: #333;
    font-size: 0.6rem
}

@media screen and (min-width: 320px) {
    html {
        font-size: 20px
    }
    .m-ui-dial {
        width: 300px;
        height: 300px;
    }
    .m-ui-dial .pointer {
        margin-top: -104px !important;
        width: 80px;
        height: 188px;
        margin: -94px 0 0 -40px;
        -webkit-transform-origin: 40px 104px;
        transform-origin: 40px 104px
    }
    .m-ui-dial .btn {
        top: 64px;
        width: 80px;
        height: 80px;
        border-radius: 40px;
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size: 22.5px
    }
    .m-ui-dial {
        width: 340px;
        height: 340px;
    }
    .m-ui-dial .pointer {
        margin-top: -114px !important;
        width: 100px;
        height: 201px;
        margin: -104px 0 0 -50px;
        -webkit-transform-origin: 50px 114px;
        transform-origin: 50px 114px
    }
    .m-ui-dial .btn {
        top: 64px;
        width: 100px;
        height: 100px;
        border-radius: 50px
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: 23.4375px
    }
    .m-ui-dial {
        width: 355px;
        height: 355px;
    }
    .m-ui-dial .pointer {
        margin-top: -114px !important;
        width: 100px;
        height: 200px;
        margin: -104px 0 0 -50px;
        -webkit-transform-origin: 50px 114px;
        transform-origin: 50px 114px
    }
    .m-ui-dial .btn {
        top: 64px;
        width: 100px;
        height: 100px;
        border-radius: 50px;
    }
}

@media screen and (min-width: 384px) {
    html {
        font-size: 24px
    }
    .m-ui-dial {
        width: 370px;
        height: 370px;
    }
    .m-ui-dial .pointer {
        margin-top: -114px !important;
        width: 100px;
        height: 188px;
        margin: -104px 0 0 -50px;
        -webkit-transform-origin: 50px 114px;
        transform-origin: 50px 114px
    }
    .m-ui-dial .btn {
        top: 64px;
        width: 100px;
        height: 100px;
        border-radius: 50px
    }
}

@media screen and (min-width: 400px) {
    html {
        font-size: 25px
    }
    .m-ui-dial {
        width: 390px;
        height: 390px;
    }
    .m-ui-dial .pointer {
        margin-top: -114px !important;
        width: 100px;
        height: 201px;
        margin: -104px 0 0 -50px;
        -webkit-transform-origin: 50px 114px;
        transform-origin: 50px 114px
    }
    .m-ui-dial .btn {
        top: 64px;
        width: 100px;
        height: 100px;
        border-radius: 50px
    }
}

@media screen and (min-width: 412px) {
    html {
        font-size: 25.75px
    }
    .m-ui-dial {
        width: 392px;
        height: 392px;
    }
    .m-ui-dial .pointer {
        margin-top: -112px !important;
        width: 120px;
        height:190px;
        margin: -119px 0 0 -59px;
        -webkit-transform-origin: 60px 110px;
        transform-origin: 60px 110px; 
    }
    .m-ui-dial .btn {
        top: 50px;
        width: 120px;
        height: 120px;
        border-radius: 75px; 
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: 25.875px
    }    
}

@media screen and (min-width: 533px) {
    html {
        font-size: 33.3125px
    }
    .m-ui-dial {
        width: 499px;
        height: 499px;
    }
    .m-ui-dial .pointer {
        margin-top: -139px !important;
        width: 150px;
        height: 238px;
        margin: -119px 0 0 -75px;
        -webkit-transform-origin: 75px 139px;
        transform-origin: 75px 139px
    }
    .m-ui-dial .btn {
        top: 64px;
        width: 150px;
        height: 150px;
        border-radius: 75px
    }
}

@media screen and (min-width: 600px) {
    html {
        font-size: 37.5px
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 48px
    }
}

.m-ui-dial {
    position: relative;    
    margin: 50px auto 0;
}

.m-ui-dial .pointer {    
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;    
}

.m-ui-dial .btn {
    position: absolute;
    left: 0;
    display: block;
    padding:0;
    background-color:initial;
    border:none;
}


 .winner-name{ height:11rem; padding:5px 15px 15px; background-color: #fff; font-size: 12px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #f0f0f0; margin:20px; overflow:hidden;} 
.winner-list{position: relative; height: 140px; margin: 0 5px; overflow: hidden;}
.winner-list::before{content: ""; position: absolute; top: 0; width: 100%; height: 40px; position: absolute; z-index: 1; background: url();
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.list-wrap{display: none; position: absolute; top: 0px; width: 100%;}
.winner-title{position: relative; height: 40px; line-height: 40px; text-align: center;}
.winner-title-bg{position: absolute; top: 19px; left: 0; width: 100%; border-top: 2px solid #f34c49;}
.winner-title-con{position: relative; display: inline-block; *display: inline; *zoom: 1; padding: 0 10px; font-size:1rem; background-color: #fff; color: #f34c49;}
.winner-inner-tit{overflow: hidden; line-height: 36px;}
.winner-name span{float: left; width: 39%; padding: 0 5%; white-space: nowrap; overflow: hidden; text-align:center;text-overflow:ellipsis; }
.winner-info{line-height: 38px; border-top: 1px dashed #d9d8d8; overflow: hidden;}
.border-none{border: 0;}
.w-zm{font-size: 16px; color: #9d4e21;}
.w-name{color: #928977;}
.w-prize{color: #f34c49;}
.winner-none{text-align: center; line-height: 300px; color: #666; font-size: 14px;}
